<!--
 * @Description:
 * @Author: lucl
 * @Date: 2021-06-25 09:03:47
 * @LastEditors: Ronda
 * @LastEditTime: 2021-07-03 19:52:55
-->
<template>
  <!-- 顾客账户管理 -->
  <div>
    <!-- 搜索选择框 -->
    <div class="search" style="display: flex; padding: 5px">
      <!-- {{ value2 }} -->
      <!-- 选择查询时间 -->
      <div class="block">
        <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" />
      </div>
      <!-- 下拉选择框 -->
      <div>
        <el-select v-model="Consumption_type" clearable placeholder="选择类型">
          <el-option label="充值" value="充值" />
          <el-option label="收益" value="收益" />
          <el-option label="提现" value="提现" />
        </el-select>
      </div>
      <!-- 状态选择下拉框 -->
      <div>
        <el-select v-model="State_type" clearable placeholder="选择状态">
          <el-option label="正常" value="正常" />
          <el-option label="未审核" value="未审核" />
        </el-select>
      </div>

      <!-- 搜索按钮 -->
      <div>
        <el-button type="primary" @click="toSearch">查询</el-button>
      </div>
    </div>
    <!-- 表格数据 -->
    <div>
      <!-- 表格 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="180" />
        <el-table-column prop="transferMoney" label="交易金额" width="180" />
        <el-table-column label="交易时间">
          <template slot-scope="scope">
            <div>{{ Moment(scope.row.transferTime).format("YYYY-MM-DD HH:mm:ss") }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="交易类型" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type='正常'" type="success">正常</el-tag>
            <el-tag v-else type="warning">{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" />
      </el-table>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="totalye" style="float:right;" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
  <!-- 查询下拉框 -->
</template>

<script>
import Moment from 'moment'
import { pageQuerySystemAccount } from '@/api/account'
export default {
  filters: {
    capitalize: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }

  },
  data() {
    return {

      // 顾客编号
      Customer_number: '',
      // 顾客信息总数
      totalye: 0,
      currentPage: 1,
      // 传给后台数据
      params: {
        page: 1,
        pageSize: 10
      },
      // 表格数据
      tableData: [],
      // 状态类型
      State_type: '',
      // 消费类型
      Consumption_type: '',
      // 快捷选日期
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // 选中的开始和结束日期
      value2: ''
    }
  },
  computed: {},

  created() {
    this.freshData()
  },
  mounted() { },
  methods: {
    Moment,
    // 提交表单查询
    async toSearch() {
      let b
      let e
      if (this.value2) {
        b = Number(this.value2[0])
        e = Number(this.value2[1])
      }
      const paramsData = {
        ...this.params,
        status: this.State_type,
        type: this.Consumption_type,
        beginTime: b,
        endTime: e,
        userId: this.Customer_number
      }
      //  遍历对象
      for (const type in paramsData) {
        // key是属性名  temp[key]属性值
        // console.log(key,temp[key]);
        if (!paramsData[type]) {
          delete paramsData[type]
        }
      }
      for (const status in paramsData) {
        // key是属性名  temp[key]属性值
        // console.log(key,temp[key]);
        if (!paramsData[status]) {
          delete paramsData[status]
        }
      }
      const res = await pageQuerySystemAccount(paramsData)
      this.totalye = res.data.total
      this.tableData = res.data.list
      // console.log(res)
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.toSearch()
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // this.params.page=1
      this.params.page = val
      this.toSearch()
      // console.log(`当前页: ${val}`);
    },
    async freshData() {
      const res = await pageQuerySystemAccount(this.params)
      this.totalye = res.data.total
      this.tableData = res.data.list
      // console.log(res)
    }
  }
}
</script>
<style scoped>
</style>
